<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      #menu {
        position: absolute;
        top: 0;
        left: 0;
        border: 1px solid red;
        width: 100px;
        height: 100px;
      }
      .hiden {
        display: none;
      }
    </style>
  </head>
  <body>
    <ul id="menu" class="hiden">
      <li>同学1</li>
      <li>同学2</li>
      <li>同学3</li>
    </ul>
  </body>
  <script>
    //1、绑定右键事件，移除默认样式，添加自定义样式
    //2、鼠标在哪点击，菜单就在哪里
    //3、委托父元素指定事件
    var hidenName = document.getElementById('menu');
    document.addEventListener('contextmenu', function (event) {
      event.preventDefault();
      hidenName.classList.remove('hiden');
      var X = event.clientX;
      console.log('X');
      var Y = event.clientY;
      hidenName.style.top = Y + 'px';
      hidenName.style.left = X + 'px';
    });
    document.addEventListener('click', function () {
      hidenName.classList.add('hiden');
    });

    hidenName.addEventListener('click', function (event) {
      console.log(event.target.innerText);
    });
  </script>
</html>
